<template>
  <van-nav-bar title="PK结束" />
  <div class="user_container">
    <div class="user1 user">
      <img class="user_image" src="../../assets/image/头像1.png" alt="" />
      <div class="victory">
        <img
          style="display: none"
          ref="user1Frame"
          src="../../assets/image/Frame.png"
          alt=""
        />
        <span>{{ user1.name }}</span>
      </div>
    </div>
    <img class="pk_image" src="../../assets/image/Vector.png" alt="" />
    <div class="user2 user">
      <img class="user_image" src="../../assets/image/头像2.jpg" alt="" />
      <div class="victory">
        <img
          style="display: none"
          ref="user2Frame"
          src="../../assets/image/Frame.png"
          alt=""
        />
        <span>{{ user2.name }}</span>
      </div>
    </div>
  </div>
  <span class="text">本次比赛的胜利者：{{ winner }}</span>
  <van-button class="logout_button" @click="layout()">点击退出</van-button>
</template>
  
<script>
import { Toast } from "vant";
import router from "../../router";
export default {
  data() {
    return {
      getUser1InfoQueryInfo: {
        methodName: "battle_getOpponentBasicInfo",
        data: { param: window.sessionStorage.getItem("account") },
      },
      getUser2InfoQueryInfo: {
        methodName: "battle_getOpponentBasicInfo",
        data: { param: "" },
      },
      getBattleResultQueryInfo: {
        methodName: "battle_getBattleResult",
        data: { param: "" },
      },
      form: {},
      user1: {
        name: "",
        icon: "",
      },
      user2: {
        name: "",
        icon: "",
      },
      winner: "",
    };
  },
  created() {
    this.init();
    this.getUser1Info();
    this.getUser2Info();
  },
  mounted() {
    this.getBattleResult();
  },
  methods: {
    layout() {
      router.push("/connect");
    },
    init() {
      this.form = JSON.parse(window.sessionStorage.getItem("pkForm"));
      this.getBattleResultQueryInfo.data.param =
        this.form.matchRelationship.battleId;
      console.log(this.form);
    },
    async getUser1Info() {
      const { data: res } = await this.$http.post(
        "/app/main",
        this.getUser1InfoQueryInfo,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.user1.name = JSON.parse(res.data).nickname;
    },
    async getUser2Info() {
      this.getUser2InfoQueryInfo.data.param =
        this.form.matchRelationship.opponentAccount;
      const { data: res } = await this.$http.post(
        "/app/main",
        this.getUser2InfoQueryInfo,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.user2.name = JSON.parse(res.data).nickname;
    },
    async getBattleResult() {
      Toast.loading({
        message: "等待对方完成...",
        forbidClick: true,
      });
      const intervalId = setInterval(async () => {
        const { data: res } = await this.$http.post(
          "/app/main",
          JSON.stringify(this.getBattleResultQueryInfo),
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        if (JSON.parse(res.data).isEnd) {
          Toast.success({
            message: "对方已经完成",
            forbidClick: true,
          });
          if (
            JSON.parse(res.data).result.winnerAccount ==
            this.getUser1InfoQueryInfo.data.param
          ) {
            this.winner = this.user1.name;
            this.$refs.user1Frame.style.display = "block";
          } else if (
            JSON.parse(res.data).result.winnerAccount ==
            this.getUser2InfoQueryInfo.data.param
          ) {
            this.winner = this.user2.name;
            this.$refs.user2Frame.style.display = "block";
          }
          window.sessionStorage.setItem("pkForm", "");
          clearInterval(intervalId);
        }
      }, 1000);
    },
  },
};
</script>
  
  <style scoped>
.image {
  background: url(../../assets/image/图片底部.png);
  width: 560px;
  height: 560px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 200px auto;
}
.text {
  margin-top: 100px;
  font-size: 40px;
  display: flex;
  justify-content: center;
}
.user_container {
  margin-top: 100px;
  display: flex;
  justify-content: space-around;
  align-self: center;
}
.user_image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.pk_image {
  height: 100px;
}
.user {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.user span {
  font-size: 30px;
}
.process1 {
  width: 250px;
  height: 40px;
  background-color: #74acc3;
  border-radius: 20px 0 0 20px;
}
.prosess_content1 {
  width: 50px;
  height: 40px;
  background-color: #224192;
  border-radius: 20px 0 0 20px;
  text-align: center;
}
.prosess_content1 span {
  margin: 0;
  color: #fff;
}
.process2 {
  width: 250px;
  height: 40px;
  background-color: #f57f7f;
  border-radius: 0px 20px 20px 0px;
  position: relative;
}
.prosess_content2 {
  position: absolute;
  right: 0;
  width: 100px;
  height: 40px;
  background-color: #d92d2d;
  border-radius: 0px 20px 20px 0px;
  text-align: center;
}
.prosess_content2 span {
  margin: 0;
  color: #fff;
}
.van-button {
  display: block;
  background-color: rgb(234, 215, 198);
  margin: 50px auto;
}

.victory {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>